<template>
  <div class="user-container">
    <!-- 用户信息卡片 -->
    <div class="user-profile">
      <div class="profile-header">
        <div class="user-avatar">
          <img :src="userInfo.avatar" alt="用户头像">
          <div class="edit-avatar">
            <span class="edit-icon">📷</span>
          </div>
        </div>
        <div class="user-details">
          <h2>{{ userInfo.name }}</h2>
          <p class="user-role">{{ userInfo.role }}</p>
          <p class="user-bio">{{ userInfo.bio }}</p>
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-value">{{ userInfo.posts }}</span>
              <span class="stat-label">发布</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ userInfo.followers }}</span>
              <span class="stat-label">粉丝</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ userInfo.following }}</span>
              <span class="stat-label">关注</span>
            </div>
          </div>
        </div>
        <button class="edit-profile-btn">编辑资料</button>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="user-content">
      <!-- 左侧边栏 -->
      <div class="sidebar">
        <div class="menu-section">
          <h3 class="menu-title">个人中心</h3>
          <ul class="menu-list">
            <li class="menu-item active">
              <span class="menu-icon">📊</span>
              <span class="menu-text">数据概览</span>
            </li>
            <li class="menu-item">
              <span class="menu-icon">📝</span>
              <span class="menu-text">我的发布</span>
            </li>
            <li class="menu-item">
              <span class="menu-icon">❤️</span>
              <span class="menu-text">我的收藏</span>
            </li>
            <li class="menu-item">
              <span class="menu-icon">🔔</span>
              <span class="menu-text">消息通知</span>
            </li>
          </ul>
        </div>
        
        <div class="menu-section">
          <h3 class="menu-title">账户设置</h3>
          <ul class="menu-list">
            <li class="menu-item">
              <span class="menu-icon">👤</span>
              <span class="menu-text">个人资料</span>
            </li>
            <li class="menu-item">
              <span class="menu-icon">🔒</span>
              <span class="menu-text">账户安全</span>
            </li>
            <li class="menu-item">
              <span class="menu-icon">🔑</span>
              <span class="menu-text">隐私设置</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 右侧内容区 -->
      <div class="main-content">
        <h2 class="content-title">数据概览</h2>
        
        <!-- 数据卡片 -->
        <div class="dashboard-cards">
          <div class="dashboard-card" v-for="(item, index) in dashboardData" :key="index">
            <div class="card-icon" :style="{ backgroundColor: item.color }">
              <span>{{ item.icon }}</span>
            </div>
            <div class="card-content">
              <h4>{{ item.title }}</h4>
              <p class="card-value">{{ item.value }}</p>
              <p class="card-trend" :class="{ 'up': item.trend > 0, 'down': item.trend < 0 }">
                {{ item.trend > 0 ? '↑' : '↓' }} {{ Math.abs(item.trend) }}%
              </p>
            </div>
          </div>
        </div>
        
        <!-- 图表区域 -->
        <div class="chart-section">
          <div class="chart-container">
            <h3 class="chart-title">活跃度趋势</h3>
            <div class="chart-placeholder">
              <div class="chart-bars">
                <div class="chart-bar" v-for="(value, index) in activityData" :key="index" 
                     :style="{ height: value + '%' }"></div>
              </div>
              <div class="chart-labels">
                <span v-for="(month, index) in months" :key="index">{{ month }}</span>
              </div>
            </div>
          </div>
          
          <div class="chart-container">
            <h3 class="chart-title">内容分布</h3>
            <div class="chart-placeholder donut">
              <div class="donut-segments">
                <div class="donut-segment" style="--percentage: 45%; --color: #64b3f4;"></div>
                <div class="donut-segment" style="--percentage: 30%; --color: #c2e59c;"></div>
                <div class="donut-segment" style="--percentage: 25%; --color: #ff758c;"></div>
              </div>
              <div class="donut-center">
                <span>内容</span>
              </div>
            </div>
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-color" style="background-color: #64b3f4;"></span>
                <span class="legend-text">文章 (45%)</span>
              </div>
              <div class="legend-item">
                <span class="legend-color" style="background-color: #c2e59c;"></span>
                <span class="legend-text">视频 (30%)</span>
              </div>
              <div class="legend-item">
                <span class="legend-color" style="background-color: #ff758c;"></span>
                <span class="legend-text">图片 (25%)</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 最近活动 -->
        <div class="recent-activities">
          <h3 class="section-title">最近活动</h3>
          <div class="activity-list">
            <div class="activity-item" v-for="(activity, index) in recentActivities" :key="index">
              <div class="activity-time">{{ activity.time }}</div>
              <div class="activity-content">
                <div class="activity-icon" :style="{ backgroundColor: activity.iconBg }">
                  {{ activity.icon }}
                </div>
                <div class="activity-details">
                  <h4>{{ activity.title }}</h4>
                  <p>{{ activity.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 用户信息
const userInfo = ref({
  name: '张小明',
  role: '高级会员',
  bio: '热爱生活，热爱分享。专注于前端技术和用户体验设计，希望通过技术让生活更美好。',
  avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
  posts: 86,
  followers: 1240,
  following: 364
});

// 数据概览
const dashboardData = ref([
  {
    title: '积分',
    value: '3,256',
    trend: 12.5,
    icon: '🏆',
    color: '#64b3f4'
  },
  {
    title: '订单',
    value: '28',
    trend: 5.3,
    icon: '📦',
    color: '#c2e59c'
  },
  {
    title: '收藏',
    value: '156',
    trend: -2.8,
    icon: '❤️',
    color: '#ff758c'
  },
  {
    title: '优惠券',
    value: '12',
    trend: 0,
    icon: '🎟️',
    color: '#ffb347'
  }
]);

// 活跃度数据
const activityData = ref([65, 40, 75, 50, 85, 60, 45]);
const months = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月']);

// 最近活动
const recentActivities = ref([
  {
    title: '购买商品',
    description: '购买了 iPhone 13 Pro Max 256GB 远峰蓝色',
    time: '今天 14:30',
    icon: '🛒',
    iconBg: '#c2e59c'
  },
  {
    title: '获得积分',
    description: '完成每日签到，获得 10 积分奖励',
    time: '今天 09:15',
    icon: '✨',
    iconBg: '#ffb347'
  },
  {
    title: '评论商品',
    description: '对 "无线蓝牙耳机" 发表了评论',
    time: '昨天 18:42',
    icon: '💬',
    iconBg: '#64b3f4'
  },
  {
    title: '收藏商品',
    description: '将 "智能手表" 添加到收藏夹',
    time: '3天前',
    icon: '❤️',
    iconBg: '#ff758c'
  }
]);
</script>

<style scoped>
/* 全局样式 */
.user-container {
  max-width: 100%;
  margin: 0 auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

/* 用户资料卡片 */
.user-profile {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.user-profile:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.profile-header {
  display: flex;
  padding: 30px;
  position: relative;
  background: linear-gradient(to right, rgba(100, 179, 244, 0.1), rgba(194, 229, 156, 0.1));
}

.user-avatar {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border: 4px solid white;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-avatar {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 36px;
  height: 36px;
  background-color: #64b3f4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.edit-avatar:hover {
  transform: scale(1.1);
  background-color: #5da3e0;
}

.edit-icon {
  color: white;
  font-size: 18px;
}

.user-details {
  flex: 1;
}

.user-details h2 {
  margin: 0 0 5px;
  font-size: 28px;
  font-weight: 500;
  color: #2c3e50;
}

.user-role {
  color: #64b3f4;
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 16px;
}

.user-bio {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 600px;
}

.user-stats {
  display: flex;
  gap: 40px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 500;
  color: #2c3e50;
}

.stat-label {
  font-size: 14px;
  color: #777;
}

.edit-profile-btn {
  background: linear-gradient(to right, #64b3f4, #c2e59c);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: absolute;
  top: 30px;
  right: 30px;
}

.edit-profile-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(100, 179, 244, 0.4);
}

/* 内容区布局 */
.user-content {
  display: flex;
  gap: 30px;
}

/* 侧边栏样式 */
.sidebar {
  width: 250px;
  flex-shrink: 0;
}

.menu-section {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.menu-title {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background-color: rgba(100, 179, 244, 0.1);
}

.menu-item.active {
  background-color: rgba(100, 179, 244, 0.15);
  color: #64b3f4;
  font-weight: 500;
}

.menu-icon {
  margin-right: 10px;
  font-size: 18px;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  padding: 30px;
}

.content-title {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

/* 数据卡片样式 */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.dashboard-card {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
  border: 1px solid #eee;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: #ddd;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.card-content {
  flex: 1;
}

.card-content h4 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #777;
  font-weight: normal;
}

.card-value {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 5px;
  color: #2c3e50;
}

.card-trend {
  font-size: 14px;
  margin: 0;
}

.card-trend.up {
  color: #c2e59c;
}

.card-trend.down {
  color: #ff758c;
}

/* 图表区域样式 */
.chart-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.chart-container {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #eee;
}

.chart-title {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.chart-placeholder {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 180px;
}

.chart-bar {
  width: 30px;
  background: linear-gradient(to top, #64b3f4, #c2e59c);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.chart-labels span {
  font-size: 12px;
  color: #777;
}

/* 环形图样式 */
.donut {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.donut-segments {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.donut-segment {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);
  background-color: var(--color);
  transform: rotate(calc(var(--percentage) * 3.6deg));
}

.donut-center {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: #f9f9f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  margin-right: 10px;
}

.legend-text {
  font-size: 14px;
  color: #666;
}

/* 最近活动样式 */
.recent-activities {
  margin-top: 30px;
}

.section-title {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  display: flex;
  background-color: #f9f9f9;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
  border: 1px solid #eee;
}

.activity-item:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.activity-time {
  min-width: 100px;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.03);
  color: #777;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.activity-content {
  flex: 1;
  display: flex;
  padding: 15px;
  align-items: center;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
  color: white;
}

.activity-details h4 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #2c3e50;
}

.activity-details p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .dashboard-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chart-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .user-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
}
</style>